技術文章
技術問答
My Project
iT 徵才
聊天室
2026 鐵人賽
登入/註冊
文章
問答
Tag
邦友
鐵人賽
搜尋
2025 iThome 鐵人賽
DAY
14
0
Vue.js
從零開始學習TypeScript、Vue.js !!
系列 第
17
篇
Day 17
17th鐵人賽
jay0519
2025-10-14 16:37:28
186 瀏覽
分享至
元件中資料與事件的傳遞
由於元件具有重複使用性,因此要使元件能夠在不同的應用中得到最大限度的重複使用與最少的內部改動,這就需要元件具有一定的靈活度,即可設定性。
可設定性歸根結底是透過資料傳遞來實現的,在使用元件時,透過傳速不同的資料來使元件互動行為、著色樣式有略微的差異。
為元件新增外部屬性
在使用原生的HTML標籤元素時,可透過屬性控制元素的一些著色行為,例如style屬性可以設定元素的樣式風格,class屬性用來設定元素的類別,等等。
自定義元件的使用方式與原生HTML標籤一樣,也可以透過屬性控制其內部行為。
在昨天的測試中,my-alert元件會在頁面中著色出一個按鈕元素,此按鈕的標題為字串「按鈕」,這個標題文案是寫死在template範本字串中的,因此無論我們建立出多少個my-alert元件,其著色出的按鈕標題都是一樣的。
如果需要在使用此元件時靈活地設定其按鈕顯示的標題,就需要使用元件中的props設定。
props是propertys的縮寫,顧名思義為屬性,props定義的屬性是提供外部設定使用的,也可以將其稱為外部屬性。
留言
追蹤
檢舉
上一篇
Day 16
下一篇
Day 18
系列文
從零開始學習TypeScript、Vue.js !!
共
30
篇
目錄
RSS系列文
訂閱系列文
0
人訂閱
26
Day 26
27
Day 27
28
Day 28
29
Day 29
30
Day 30
完整目錄
熱門推薦
{{ item.subject }}
{{ item.channelVendor }}
|
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友留言
立即登入留言
iThome鐵人賽
參賽組數
201
組
團體組數
6
組
累計文章數
1385
篇
最後報名日
9/15
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
15th鐵人賽
16th鐵人賽
13th鐵人賽
14th鐵人賽
17th鐵人賽
12th鐵人賽
11th鐵人賽
鐵人賽
2019鐵人賽
javascript
2018鐵人賽
python
2017鐵人賽
windows
php
c#
linux
windows server
css
react
熱門問題
分享資訊人員最佳筆記紀錄方案
表格型pdf 匯入excel
請問TIPTOP T100 Oracle DB正式區複製到測試區
熱門回答
分享資訊人員最佳筆記紀錄方案
表格型pdf 匯入excel
熱門文章
Day 10 RD 有程式碼證明自己做了什麼,那 QA 要拿什麼證明?
船舶應用,近海 4G LTE,航運 Starlink 整合運用
Claude code 新手篇 5:換 section 不斷線 — 把「當下進度」交接給下一個對話
模型到第七頁就忘了那個孩子
使用 Angular、Firebase AI Logic 與 Gemini Nano 打造混合式影像分析應用程式
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}